<template>
  <div class="card">
    <el-avatar :size="90" :src="require('../assets/avatar/'+usId+'.jpg')" class="pic"></el-avatar>
    <h2 class="email">{{ userEmail }}</h2>
    <span class="detail"><span @click="toLike">点赞{{likeNum}}&nbsp;</span>|<span @click="toCollect">&nbsp;收藏{{collectNum}}&nbsp;</span>|<span @click="toCard">&nbsp;卡片{{ cardNum }}&nbsp;</span>|<span>&nbsp;感想{{blogNum}}&emsp;</span>
    </span>
  </div>
  <div class="blog">
    <div v-for="blog of blogList" :key="blog">
      <h3 class="title">#&nbsp;{{ blog.blog_title }}</h3>
      <div class="content">{{ blog.blog_content }}</div>
      <div class="date">{{ blog.blog_date }}</div>
      <el-divider></el-divider>
    </div>
    <el-divider v-show="nothing">这个家伙很懒，什么也没留下</el-divider>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
  name: 'VisitView',
  setup () {
    const centerDialogVisible = ref(false)
    const userPicture = ref('')
    const userEmail = ref('')
    const likeNum = ref(0)
    const collectNum = ref(0)
    const cardNum = ref(0)
    const blogNum = ref(0)
    const router = useRouter()
    const route = useRoute()
    const blogList:any = ref(null)
    const usId = route.query.usId
    const nothing = ref(false)
    const blogForm = reactive({
      blog_title: '',
      blog_content: '',
      user_id: usId
    })
    const getUser = () => {
      axios.post('http://localhost:8081/getUser', { user_id: usId }).then(res => {
        if (res.data !== null) {
          userPicture.value = res.data.user_picture
          userEmail.value = res.data.user_email
        } else {
          console.log('getUserError')
        }
      }).catch(error => {
        console.log(error)
      })
    }
    const getLike = () => {
      axios.post('http://localhost:8081/getLike', { user_id: usId }).then(res => {
        if (res.data !== null) {
          likeNum.value = res.data
        } else {
          console.log('getLikeError')
        }
      }).catch(error => {
        console.log(error)
      })
    }
    const getCollect = () => {
      axios.post('http://localhost:8081/getCollect', { user_id: usId }).then(res => {
        if (res.data !== null) {
          collectNum.value = res.data
        } else if (res.data === 'error') {
          console.log('getLikeError')
        }
      }).catch(error => {
        console.log(error)
      })
    }
    const countCard = () => {
      axios.post('http://localhost:8081/countCard', { user_id: usId }).then(res => {
        if (res.data !== null) {
          cardNum.value = res.data
        } else if (res.data === 'error') {
          console.log('getCardError')
        }
      }).catch(error => {
        console.log(error)
      })
    }
    const countBlog = () => {
      axios.post('http://localhost:8081/countBlog', { user_id: usId }).then(res => {
        if (res.data !== null) {
          blogNum.value = res.data
          if (blogNum.value === 0) {
            nothing.value = true
          }
        } else if (res.data === 'error') {
          console.log('getBlogNumError')
        }
      }).catch(error => {
        console.log(error)
      })
    }
    const getBlog = () => {
      axios.post('http://localhost:8081/getBlog', { user_id: usId }).then(res => {
        if (res.data !== null) {
          blogList.value = res.data
        } else {
          console.log('error')
        }
      }).catch(error => {
        console.log(error)
      })
    }
    const toLike = () => {
      router.push({ name: 'like', query: { usId: usId } })
    }
    const toCollect = () => {
      router.push({ name: 'collect', query: { usId: usId } })
    }
    const toCard = () => {
      router.push({ name: 'card', query: { usId: usId } })
    }
    getUser()
    getBlog()
    getLike()
    getCollect()
    countCard()
    countBlog()
    return {
      userPicture,
      userEmail,
      likeNum,
      collectNum,
      cardNum,
      blogNum,
      centerDialogVisible,
      blogForm,
      blogList,
      toLike,
      toCollect,
      toCard,
      nothing,
      usId
    }
  }
})
</script>
<style scoped>
.card{
  position: relative;
  top: 80px;
  width: 700px;
  height: 130px;
  margin-top: 20px;
  margin-left: 130px;
}
.pic{
  position: absolute;
  left: 0px;
  top: 20px;
}
.email{
  position: absolute;
  left: 120px;
  top: 10px;
}
.detail{
  position: absolute;
  left: 120px;
  top: 80px;
  cursor: pointer;
}
.blog{
  position: relative;
  top: 100px;
  width: 700px;
  height: auto;
  /* box-shadow: 0px 5px 15px #bebfc0; */
  margin-top: 20px;
  margin-left: 130px;
}
.title{
  text-align: left;
  white-space: pre-wrap;
}
.content{
  text-align: left;
  white-space: pre-wrap;
}
.date{
  color: gray;
  font-size: small;
  text-align: left;
  margin-top: 15px;
}
</style>
